<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage"
        v-loading="loading2"
        :element-loading-text="$t('拼命同步中')"
        >
        <l-panel>
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('please enter query keyword')"  @keyup.enter.native="hanleSearch" v-model="searchWord" size="mini" >
                        <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns @click="handleAdd()" :btnText="$t('同步')" >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table 
                :columns="columns"
                :dataSource="tableShowData" 
                :loading="loading"
                row-key="id"
                default-expand-all
                >
                <template v-slot:isSyn="scope" >
                    <el-tag v-if="scope.row.isSyn == 1" size="mini" type="success">{{ $t('已同步') }}</el-tag>
                    <el-tag v-else size="mini" type="danger">{{ $t('未同步') }}</el-tag>
                </template>
            </l-table>
        </l-panel>
    </l-layout>
</template>

<script>
const api = window.$api.wechat.organize
export default {
    data () {
        return {
            lr_isPage:true,
            //query
            searchWord:'',
            loading:false,
            loading2:false,
            columns: [
                {label:'名称',prop:'name',minWidth:'260'},
                {label:'编号',prop:'code',width:'150'},
                {label:'同步状态',prop:'isSyn',width:'100',align:'center'},
            ],
            tableData:[]
        }
    },
    mounted () {
        this.loadTable()
    },
    computed:{
        tableShowData(){
            return  this.$toTree(this.tableData,"id","parentid","id","name")
        }
    },
    methods:{
        async loadTable(){
            this.loading = true
            this.tableData = await this.$awaitWraper(api.getList({keyword:this.searchWord}))
            this.loading = false
        },

        hanleSearch(){
            this.loadTable()
        },
        async handleAdd(){
            this.loading2 = true
            const res = await this.$awaitWraper(api.syncData())
            if(res){
                this.$message({
                    type: 'success',
                    message: this.$t('同步成功!')
                })
            }
            this.loadTable()
            this.loading2 = false
        }
    }

}
</script>
